<template>
  <div>
    <div style="text-align: right; padding: 0 20px">
      <el-radio-group v-model="type" @input="handle()">
        <el-radio label="1">近7日</el-radio>
        <el-radio label="2">近一月</el-radio>
      </el-radio-group>
    </div>
    <div class="box">
      <div class="box-lt">
        <div class="box-lt-num">
          <p>本周销售总额</p>
          <span>{{ week.value }}</span>
          <em>同比上周 {{ week.percent }}</em>
        </div>
        <div class="box-lt-num">
          <p>本月销售总额</p>
          <span>{{ month.value }}</span>
          <em>同比上月 {{ month.percent }}</em>
        </div>
      </div>
      <div class="box-rt">
        <area-stack
          name="countOrderByType"
          :data="countOrderByType"
          :extend="{ title: title }"
        />
      </div>
    </div>
  </div>
</template>
<script>
import areaStack from '@c/echarts/area-stack'
export default {
  components: {
    areaStack,
  },
  data() {
    return {
      title: '近7日销售统计',
      type: '1',
      week: {},
      month: {},
      countOrderByType: { categories: [], series: [] },
    }
  },
  created() {
    this.handle()
  },
  methods: {
    handle() {
      this.countOrderByTypeList()
      this.countOrderPercentList()
    },
    countOrderPercentList() {
      //同比增长
      this.$axios.get('/count/bigscreent4/countOrderPercent').then((data) => {
        this.week = {}
        this.month = {}
        if (data.code == 200) {
          let { week, month } = data.data
          this.week = week
          this.month = month
        } else {
          this.$message.error(data.msg)
        }
      })
    },
    countOrderByTypeList() {
      if (this.type == 1) {
        this.title = '近7日销售统计'
      } else {
        this.title = '近一月销售统计'
      }
      this.$axios
        .get(`/count/bigscreent4/countOrderByType?type=${this.type}`)
        .then((data) => {
          this.countOrderByType = { categories: [], series: [] }
          if (data.code == 200) {
            const categories = [],
              series = []
            data.data.forEach((element) => {
              categories.push(element.name)
              series.push(element.value)
            })
            this.countOrderByType = {
              categories: categories,
              series: [
                {
                  name: '销量统计',
                  data: series,
                },
              ],
            }
          } else {
            this.$message.error(data.msg)
          }
        })
    },
  },
}
</script>
<style lang="scss" scoped>
.box {
  display: flex;
  &-lt {
    width: 300px;
    &-num {
      border-radius: 4px;
      border: 1px solid #ebeef5;
      color: #303133;
      padding: 15px 25px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
      margin-top: 25px;
      p {
        font-size: 16px;
        font-weight: 400;
        color: #b1b1b1;
      }
      span {
        display: block;
        font-size: 32px;
        font-weight: 400;
        color: #000000;
        margin: 10px 0;
      }
      em {
        display: block;
        font-size: 16px;
        font-weight: 400;
        color: #b1b1b1;
        text-align: right;
      }
    }
  }
  &-rt {
    flex: 1;
  }
}
</style>
